<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招贤纳士 - 企业官网</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0D2E88',
                        accent: '#FF7D00',
                        dark: '#1D2939',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
        }
    </style>
</head>
<body class="font-sans text-dark bg-light">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/95 shadow-sm backdrop-blur-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16 md:h-20">
                <div class="flex items-center">
                    <a href="/" class="flex items-center">
                        <span class="text-primary text-2xl font-bold">xxxx科技有限公司</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="/" class="text-dark hover:text-primary font-medium transition-colors duration-200">首页</a>
                    <a href="/products" class="text-dark hover:text-primary font-medium transition-colors duration-200">产品中心</a>
                    <a href="/about" class="text-dark hover:text-primary font-medium transition-colors duration-200">关于我们</a>
                    <a href="/news" class="text-dark hover:text-primary font-medium transition-colors duration-200">新闻资讯</a>
                    <a href="/cases" class="text-dark hover:text-primary font-medium transition-colors duration-200">典型案例</a>
                    <a href="/jobs" class="text-primary font-medium">招贤纳士</a>
                    <a href="/contact" class="text-dark hover:text-primary font-medium transition-colors duration-200">联系我们</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button type="button" id="menu-toggle" class="text-dark hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
            <div class="container mx-auto px-4 py-3 space-y-2">
                <a href="/" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">首页</a>
                <a href="/products" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">产品中心</a>
                <a href="/about" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">关于我们</a>
                <a href="/news" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">新闻资讯</a>
                <a href="/cases" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">典型案例</a>
                <a href="/jobs" class="block py-2 text-primary font-medium">招贤纳士</a>
                <a href="/contact" class="block py-2 text-dark hover:text-primary font-medium transition-colors duration-200">联系我们</a>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="bg-primary/5 py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">招贤纳士</h1>
            <div class="flex items-center mt-2">
                <a href="/" class="text-gray-500 hover:text-primary transition-colors duration-200">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                <span class="text-primary">招贤纳士</span>
            </div>
        </div>
    </section>

    <!-- 招贤纳士内容 -->
    <section class="py-16 md:py-24 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">加入我们</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">我们提供具有竞争力的薪酬福利和广阔的发展空间，期待您的加入</p>
                <div class="w-20 h-1 bg-primary mx-auto mt-6 rounded-full"></div>
            </div>
            
            <!-- 公司福利 -->
            <div class="mb-20">
                <h3 class="text-2xl font-bold text-dark mb-8">我们的福利</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="bg-light p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-heart text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-dark mb-2">健康关怀</h4>
                                <p class="text-gray-600">年度体检、商业保险、健康讲座，全方位关注您的身心健康</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-light p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-graduation-cap text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-dark mb-2">学习发展</h4>
                                <p class="text-gray-600">定期培训、技术分享、专业认证，助您不断提升职业技能</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-light p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-coffee text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-dark mb-2">工作环境</h4>
                                <p class="text-gray-600">舒适办公空间、免费零食饮料、定期团队活动，营造轻松工作氛围</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-light p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-calendar text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-dark mb-2">休假制度</h4>
                                <p class="text-gray-600">法定假期、年假、病假、婚假、产假，保障您的休息权益</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-light p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-gift text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-dark mb-2">节日福利</h4>
                                <p class="text-gray-600">生日礼品、节日礼品、结婚礼金、生育礼金，感受公司温暖关怀</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-light p-6 rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fa fa-line-chart text-primary text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-bold text-dark mb-2">薪酬体系</h4>
                                <p class="text-gray-600">有竞争力的薪酬、绩效奖金、年终奖金，与公司共同成长</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 职位列表 -->
            <div>
                <h3 class="text-2xl font-bold text-dark mb-8">热门职位</h3>
                
                <div class="space-y-6">
                    {% for job in jobs %}
                    <div class="bg-light rounded-xl shadow-sm hover:shadow-md transition-all duration-300 overflow-hidden" id="job-{{ job.id }}">
                        <div class="p-6 cursor-pointer job-header" onclick="toggleJobDetails('{{ job.id }}')">
                            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                <div>
                                    <h4 class="text-xl font-bold text-dark mb-2">{{ job.title }}</h4>
                                    <div class="flex flex-wrap gap-4 mb-4">
                                        <span class="text-gray-600"><i class="fa fa-map-marker mr-2"></i>{{ job.location }}</span>
                                        <span class="text-gray-600"><i class="fa fa-briefcase mr-2"></i>{{ job.experience }}</span>
                                        <span class="text-gray-600"><i class="fa fa-graduation-cap mr-2"></i>{{ job.education }}</span>
                                        <span class="text-primary font-bold"><i class="fa fa-money mr-2"></i>{{ job.salary }}</span>
                                        <!-- 新增显示部门、工作性质等字段 -->
                                        {% if job.department %}
                                        <span class="text-gray-600"><i class="fa fa-building mr-2"></i>{{ job.department }}</span>
                                        {% endif %}
                                        {% if job.job_type %}
                                        <span class="text-gray-600"><i class="fa fa-clock-o mr-2"></i>{{ job.job_type }}</span>
                                        {% endif %}
                                    </div>
                                    <!-- 新增显示职位描述简短摘要 -->
                                    {% if job.requirements %}
                                    <p class="text-gray-600 line-clamp-2 mb-4">职位要求: {{ job.requirements }}</p>
                                    {% endif %}
                                    
                                    {% if job.responsibilities %}
                                    <p class="text-gray-600 line-clamp-2 mb-4">工作职责: {{ job.responsibilities }}</p>
                                    {% endif %}
                                </div>
                                <div class="mt-4 md:mt-0">
                                    <span class="bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium">
                                        {{ job.department }}
                                    </span>
                                    <i class="fa fa-angle-down ml-2 transition-transform duration-300 job-icon" id="job-icon-{{ job.id }}"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="job-details hidden bg-white p-6 border-t border-gray-100">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div>
                                    <h5 class="text-lg font-bold text-dark mb-3">岗位职责</h5>
                                    <ul class="space-y-2 text-gray-600">
                                        {% for responsibility in job.responsibilities %}
                                        <li class="flex items-start">
                                            <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                                            <span>{{ responsibility }}</span>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                
                                <div>
                                    <h5 class="text-lg font-bold text-dark mb-3">任职要求</h5>
                                    <ul class="space-y-2 text-gray-600">
                                        {% for requirement in job.requirements %}
                                        <li class="flex items-start">
                                            <i class="fa fa-check-circle text-primary mt-1 mr-2"></i>
                                            <span>{{ requirement }}</span>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            
                            <div class="mt-8">
                                <button class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg transition-colors duration-200 inline-flex items-center" onclick="showApplyForm('{{ job.id }}')">
                                    <i class="fa fa-paper-plane mr-2"></i>
                                    立即申请
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>
    
    <!-- 应聘表单模态框 -->
    <div id="apply-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform scale-95 transition-transform duration-300" id="modal-content">
            <div class="p-6 border-b border-gray-100 flex justify-between items-center">
                <h3 class="text-xl font-bold text-dark" id="modal-title">申请职位</h3>
                <button class="text-gray-400 hover:text-gray-600 transition-colors duration-200" onclick="closeApplyForm()">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <div class="p-6">
                <form id="apply-form" class="space-y-6">
                    <input type="hidden" id="job-id-input" name="job_id">
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名 <span class="text-red-500">*</span></label>
                            <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200" required>
                        </div>
                        
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号码 <span class="text-red-500">*</span></label>
                            <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200" required>
                        </div>
                        
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱 <span class="text-red-500">*</span></label>
                            <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200" required>
                        </div>
                        
                        <div>
                            <label for="experience" class="block text-sm font-medium text-gray-700 mb-1">工作经验</label>
                            <select id="experience" name="experience" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200">
                                <option value="">请选择</option>
                                <option value="应届毕业生">应届毕业生</option>
                                <option value="1-3年">1-3年</option>
                                <option value="3-5年">3-5年</option>
                                <option value="5-10年">5-10年</option>
                                <option value="10年以上">10年以上</option>
                            </select>
                        </div>
                    </div>
                    
                    <div>
                        <label for="resume" class="block text-sm font-medium text-gray-700 mb-1">上传简历 <span class="text-red-500">*</span></label>
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-primary transition-colors duration-200">
                            <div class="space-y-1 text-center">
                                <i class="fa fa-cloud-upload text-gray-400 text-3xl"></i>
                                <div class="flex text-sm text-gray-600">
                                    <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-primary/80">
                                        <span>上传文件</span>
                                        <input id="file-upload" name="file-upload" type="file" class="sr-only" accept=".pdf,.doc,.docx">
                                    </label>
                                    <p class="pl-1">或拖放文件</p>
                                </div>
                                <p class="text-xs text-gray-500">
                                    支持 PDF, DOC, DOCX 格式，不超过 5MB
                                </p>
                            </div>
                        </div>
                        <p id="file-name" class="mt-2 text-sm text-gray-500 hidden"></p>
                    </div>
                    
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言</label>
                        <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200" placeholder="请简要描述您的相关经验和优势..."></textarea>
                    </div>
                    
                    <div class="pt-4">
                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg transition-colors duration-200 inline-flex items-center justify-center">
                            <i class="fa fa-paper-plane mr-2"></i>
                            提交申请
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <h3 class="text-xl font-bold mb-6">xxxx科技有限公司</h3>
                    <p class="text-gray-400 mb-6">我们致力于为客户提供最优质的产品和服务，满足您的各种需求。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="/" class="text-gray-400 hover:text-white transition-colors duration-200">首页</a></li>
                        <li><a href="/products" class="text-gray-400 hover:text-white transition-colors duration-200">产品中心</a></li>
                        <li><a href="/about" class="text-gray-400 hover:text-white transition-colors duration-200">关于我们</a></li>
                        <li><a href="/news" class="text-gray-400 hover:text-white transition-colors duration-200">新闻资讯</a></li>
                        <li><a href="/cases" class="text-gray-400 hover:text-white transition-colors duration-200">典型案例</a></li>
                        <li><a href="/jobs" class="text-gray-400 hover:text-white transition-colors duration-200">招贤纳士</a></li>
                        <li><a href="/contact" class="text-gray-400 hover:text-white transition-colors duration-200">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">联系方式</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">北京市海淀区xxxxxxx</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">186xxxxxxxx3 或 010-xxxxxxxx1</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">123456@qq.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-clock-o mt-1 mr-3 text-gray-400"></i>
                            <span class="text-gray-400">周一至周五: 9:00 - 18:00</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">关注我们</h3>
                    <div class="bg-white/10 p-4 rounded-lg text-center">
                        <img src="https://picsum.photos/150/150?random=2" alt="微信公众号" class="w-32 h-32 mx-auto mb-3 rounded-lg">
                        <p class="text-gray-400 text-sm">扫描二维码关注公众号</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row md:justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 xxxx科技有限公司. 保留所有权利.</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">服务条款</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors duration-200">网站地图</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- 在线客服 -->
    <div id="chat-widget" class="fixed bottom-6 right-6 z-50">
        <button id="chat-toggle" class="bg-primary hover:bg-primary/90 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition-all duration-300 focus:outline-none">
            <i class="fa fa-comments text-xl"></i>
        </button>
        
        <div id="chat-box" class="hidden bg-white rounded-xl shadow-2xl w-80 h-[400px] flex flex-col mt-4 transform transition-all duration-300">
            <div class="bg-primary text-white p-4 rounded-t-xl flex items-center justify-between">
                <h3 class="font-bold">在线客服</h3>
                <button id="chat-close" class="text-white hover:text-white/80 transition-colors duration-200">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <div class="flex-1 p-4 overflow-y-auto" id="chat-messages">
                <div class="flex items-start mb-4">
                    <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-3 flex-shrink-0">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
                        <p>您好！有什么可以帮助您的吗？</p>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-200 p-4">
                <div class="flex">
                    <input type="text" id="chat-input" placeholder="输入消息..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors duration-200">
                    <button id="chat-send" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors duration-200">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 职位详情切换
        function toggleJobDetails(jobId) {
            const details = document.getElementById(`job-details-${jobId}`);
            const icon = document.getElementById(`job-icon-${jobId}`);
            
            if (details.classList.contains('hidden')) {
                details.classList.remove('hidden');
                icon.classList.add('rotate-180');
            } else {
                details.classList.add('hidden');
                icon.classList.remove('rotate-180');
            }
        }
        
        // 应聘表单显示
        function showApplyForm(jobId) {
            const modal = document.getElementById('apply-modal');
            const modalContent = document.getElementById('modal-content');
            const jobIdInput = document.getElementById('job-id-input');
            const modalTitle = document.getElementById('modal-title');
            
            // 获取职位标题
            const jobTitle = document.querySelector(`#job-${jobId} h4`).textContent;
            
            // 设置职位ID和标题
            jobIdInput.value = jobId;
            modalTitle.textContent = `申请：${jobTitle}`;
            
            // 显示模态框
            modal.classList.remove('opacity-0', 'pointer-events-none');
            modal.classList.add('opacity-100', 'pointer-events-auto');
            modalContent.classList.remove('scale-95');
            modalContent.classList.add('scale-100');
            
            // 阻止背景滚动
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭应聘表单
        function closeApplyForm() {
            const modal = document.getElementById('apply-modal');
            const modalContent = document.getElementById('modal-content');
            
            // 隐藏模态框
            modal.classList.add('opacity-0', 'pointer-events-none');
            modal.classList.remove('opacity-100', 'pointer-events-auto');
            modalContent.classList.add('scale-95');
            modalContent.classList.remove('scale-100');
            
            // 恢复背景滚动
            document.body.style.overflow = '';
            
            // 重置表单
            document.getElementById('apply-form').reset();
            document.getElementById('file-name').classList.add('hidden');
        }
        
        // 文件上传处理
        document.getElementById('file-upload').addEventListener('change', function() {
            const fileInput = this;
            const fileName = document.getElementById('file-name');
            
            if (fileInput.files.length > 0) {
                fileName.textContent = `已选择：${fileInput.files[0].name}`;
                fileName.classList.remove('hidden');
            } else {
                fileName.classList.add('hidden');
            }
        });
        
        // 表单提交处理
        document.getElementById('apply-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 这里可以添加表单验证和AJAX提交逻辑
            alert('感谢您的申请，我们会尽快与您联系！');
            closeApplyForm();
        });
        
        // 在线客服
        document.addEventListener('DOMContentLoaded', function() {
            const chatToggle = document.getElementById('chat-toggle');
            const chatBox = document.getElementById('chat-box');
            const chatClose = document.getElementById('chat-close');
            const chatInput = document.getElementById('chat-input');
            const chatSend = document.getElementById('chat-send');
            const chatMessages = document.getElementById('chat-messages');
            
            chatToggle.addEventListener('click', function() {
                chatBox.classList.toggle('hidden');
                if (!chatBox.classList.contains('hidden')) {
                    chatInput.focus();
                }
            });
            
            chatClose.addEventListener('click', function() {
                chatBox.classList.add('hidden');
            });
            
            function addMessage(text, isUser = false) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `flex items-start mb-4 ${isUser ? 'justify-end' : ''}`;
                
                let avatar, bgClass;
                if (isUser) {
                    avatar = '<i class="fa fa-user"></i>';
                    bgClass = 'bg-primary text-white';
                } else {
                    avatar = '<i class="fa fa-headphones"></i>';
                    bgClass = 'bg-gray-100 text-dark';
                }
                
                messageDiv.innerHTML = `
                    <div class="${isUser ? 'mr-0 ml-3' : 'mr-3 ml-0'} bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
                        ${avatar}
                    </div>
                    <div class="rounded-lg p-3 max-w-[80%] ${bgClass}">
                        <p>${text}</p>
                    </div>
                `;
                
                chatMessages.appendChild(messageDiv);
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
            
            chatSend.addEventListener('click', function() {
                const message = chatInput.value.trim();
                if (message) {
                    addMessage(message, true);
                    chatInput.value = '';
                    
                    // 模拟回复
                    setTimeout(() => {
                        addMessage('感谢您的咨询，我们会尽快回复您！');
                    }, 800);
                }
            });
            
            chatInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    chatSend.click();
                }
            });
        });
    </script>
</body>
</html>